<template>
	<view class="card-swiper" v-show="list" @click="tapList">
		<view class="title">
			<span>查看全部商品</span>
		</view>
		<swiper v-if="list&&list.length>0" class="card-swiper-content" :display-multiple-items="config.multiple || 3"
			:interval="1000" :duration="4000" easing-function="linear" disable-touch :autoplay="autoplay" circular>
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="swiper-item" :style="{height:config.height+'rpx'}">
					<image class="img" :src="mainImg(item.goods_image+'?x-oss-process=image/resize,w_140,m_lfit')" :style="{borderRadius:config.radius+'rpx'}" mode="aspectFill" lazy-load>
					</image>
					<image class="good-icon" :src="isType(item.level_id)" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- <scroll-view class="scroll-view" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true"
			@scrolltolower="scrolltolower">
			<view class="scroll-view-item" v-for="(item,index) in imgList" :key="index" :id="'good-'+item.goods_id">
				<image class="img" :src="mainImg(item.goods_image+'?x-oss-process=image/resize,w_140,m_lfit')"
					mode="widthFix"></image>
			</view>
		</scroll-view> -->
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			config: {},
			autoplay: {
				type: Boolean,
				default: true
			}
		},
		// data() {
		// 	return {
		// 		scrollLeft: 0,
		// 		imgList: []
		// 	}
		// },
		// watch:{
		// 	list(newVal,oldVal){
		// 		console.log('newVal',newVal);
		// 		console.log('oldVal',oldVal)
		// 		if(oldVal.length==0&&newVal.length>0){
		// 			this.imgList = newVal;
		// 		}
		// 	}
		// },
		// mounted() {
		// 	setInterval(() => {
		// 		this.scrollLeft = this.scrollLeft + 1;
		// 	}, 30)
		// },
		methods: {
			// scrolltolower(e) {
			// 	console.log('触底');
			// 	this.imgList = this.imgList.concat(this.list);
			// },
			mainImg(img) {
				return this.$util.img(img);
			},
			isType(type) {
				switch (type) {
					case 1:
						return require(`@/static/image/card-type-1.png`);
					case 2:
						return require(`@/static/image/card-type-3.png`);
					case 3:
						return require(`@/static/image/card-type-2.png`);
					case 4:
						return require(`@/static/image/card-type-4.png`);
					default:
						break;
				}
			},
			// 打开所有商品弹窗
			tapList() {
				this.$emit('openPop', {
					type: 'allGoods',
					fromType: 'card'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card-swiper {
		position: relative;
		box-sizing: border-box;
		background: url(../../../../static/image/triangle-bg.png) no-repeat;
		background-size: 100% auto;
		margin-top: -80rpx;
		border-radius: 31rpx 31rpx 0px 0px;

		.title {
			font-size: 24rpx;
			color: #111111;
			text-align: center;
			padding: 41rpx 0 34rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			line-height: 21rpx;
		}

		.card-swiper-content {
			height: 206rpx;
		}

		.swiper-item {
			width: 140rpx;
			height: 140rpx;
			margin-right: 14rpx;
			position: relative;
			background: #FFFFFF;
			border: 1px solid #dadada;
			border-radius: 10rpx;

			.img {
				width: 100%;
				height: 100%;
			}

			.good-icon {
				width: 69rpx;
				height: 31rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}

	}
</style>


<!-- <style lang="scss">
	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		display: inline-block;
		width: 140rpx;
		height: 140rpx;

		.img {
			width: 140rpx;
			height: 140rpx;
		}
	}
</style>
 -->